<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业官网</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0D2E88',
                        accent: '#FF7D00',
                        dark: '#1D2939',
                        light: '#F9FAFB'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .hover-scale {
                transition: transform 0.3s ease;
            }
            .hover-scale:hover {
                transform: scale(1.03);
            }
            .animate-fade-in {
                animation: fadeIn 0.8s ease-in-out;
            }
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(20px); }
                to { opacity: 1; transform: translateY(0); }
            }
        }
    </style>
</head>
<body class="font-sans text-dark bg-light">
    <!-- 导航栏 -->
    <header class="sticky top-0 z-50 bg-white/95 shadow-sm backdrop-blur-sm transition-all duration-300" id="navbar">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16 md:h-20">
                <div class="flex items-center">
                    <a href="/" class="flex items-center">
                        <span class="text-primary text-2xl font-bold">xxxx科技有限公司</span>
                    </a>
                </div>
                
                <!-- 桌面导航 -->
                <nav class="hidden md:flex space-x-8">
                    <a href="/" class="text-dark hover:text-primary font-medium transition-colors duration-200">首页</a>
                    <a href="/products" class="text-dark hover:text-primary font-medium transition-colors duration-200">产品中心</a>
                    <a href="/about" class="text-dark hover:text-primary font-medium transition-colors duration-200">关于我们</a>
                    <a href="/news" class="text-dark hover:text-primary font-medium transition-colors duration-200">新闻资讯</a>
                    <a href="/cases" class="text-dark hover:text-primary font-medium transition-colors duration-200">典型案例</a>
                    <a href="/jobs" class="text-dark hover:text-primary font-medium transition-colors duration-200">招贤纳士</a>
                    <a href="/contact" class="text-dark hover:text-primary font-medium transition-colors duration-200">联系我们</a>
                </nav>
                
                <!-- 移动端菜单按钮 -->
                <div class="md:hidden">
                    <button type="button" id="menu-toggle" class="text-dark hover:text-primary focus:outline-none">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-100">
            <div class="container mx-auto px-4 py-3 space-y-2">
                <a href="/" class="block py-2 text-dark hover:text-primary font-medium transition-colors duration-200">首页</a>
                <a href="/products" class="block py-2 text-dark hover:text-primary font-medium transition-colors duration-200">产品中心</a>
                <a href="/about" class="block py-2 text-dark hover:text-primary font-medium transition-colors duration-200">关于我们</a>
                <a href="/news" class="block py-2 text-dark hover:text-primary font-medium transition-colors duration-200">新闻资讯</a>
                <a href="/cases" class="block py-2 text-dark hover:text-primary font-medium transition-colors duration-200">典型案例</a>
                <a href="/jobs" class="block py-2 text-dark hover:text-primary font-medium transition-colors duration-200">招贤纳士</a>
                <a href="/contact" class="block py-2 text-dark hover:text-primary font-medium transition-colors duration-200">联系我们</a>
            </div>
        </div>
    </header>

    <!-- 轮播图 -->
    <section class="relative h-[500px] md:h-[600px] overflow-hidden">
        <div id="carousel" class="relative h-full">
            {% for carousel in carousels %}
            <div class="carousel-item absolute inset-0 transition-opacity duration-1000 {% if loop.first %}opacity-100{% else %}opacity-0{% endif %}">
                <img src="{{ carousel.image_url }}" alt="{{ carousel.title }}" class="w-full h-full object-cover">
                <div class="absolute inset-0 bg-gradient-to-r from-secondary/70 to-transparent flex items-center">
                    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                        <div class="max-w-2xl animate-fade-in">
                            {% if carousel.title %}
                            <h2 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-white leading-tight text-shadow mb-4">{{ carousel.title }}</h2>
                            {% endif %}
                            {% if carousel.link_url %}
                            <a href="{{ carousel.link_url }}" class="inline-block bg-accent hover:bg-accent/90 text-white font-medium py-3 px-8 rounded-full transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1">
                                了解更多 <i class="fa fa-arrow-right ml-2"></i>
                            </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
            
            <!-- 轮播图控制按钮 -->
            <button id="prev-btn" class="absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 bg-white/30 hover:bg-white/50 backdrop-blur-sm rounded-full flex items-center justify-center text-white transition-all duration-300 focus:outline-none">
                <i class="fa fa-angle-left text-2xl"></i>
            </button>
            <button id="next-btn" class="absolute right-4 top-1/2 -translate-y-1/2 w-12 h-12 bg-white/30 hover:bg-white/50 backdrop-blur-sm rounded-full flex items-center justify-center text-white transition-all duration-300 focus:outline-none">
                <i class="fa fa-angle-right text-2xl"></i>
            </button>
            
            <!-- 轮播图指示器 -->
            <div class="absolute bottom-6 left-1/2 -translate-x-1/2 flex space-x-2">
                {% for carousel in carousels %}
                <button class="w-3 h-3 rounded-full bg-white/50 hover:bg-white focus:outline-none transition-all duration-300 {% if loop.first %}bg-white{% endif %}" data-index="{{ loop.index0 }}"></button>
                {% endfor %}
            </div>
        </div>
    </section>

    <!-- 产品展示 -->
    <section class="py-16 md:py-24 bg-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">产品中心</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">我们提供全方位的解决方案，满足您的各种需求</p>
                <div class="w-20 h-1 bg-primary mx-auto mt-6 rounded-full"></div>
            </div>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
                {% for product in products %}
                <div class="bg-light rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 hover-scale">
                    {% if product.image_url %}
                    <img src="{{ product.image_url }}" alt="{{ product.name }}" class="w-full h-60 object-cover">
                    {% else %}
                    <div class="w-full h-60 bg-gray-100 flex items-center justify-center">
                        <span class="text-gray-400">暂无图片</span>
                    </div>
                    {% endif %}
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-dark mb-3">{{ product.name }}</h3>
                        <p class="text-gray-600 mb-6 line-clamp-3">{{ product.description }}</p>
                        <a href="#" class="inline-flex items-center text-primary font-medium hover:text-primary/80 transition-colors duration-200">
                            查看详情 <i class="fa fa-long-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
                {% endfor %}
            </div>
            
            <div class="text-center mt-12">
                <a href="/products" class="inline-block border-2 border-primary text-primary hover:bg-primary hover:text-white font-medium py-3 px-8 rounded-full transition-all duration-300">
                    查看全部产品
                </a>
            </div>
        </div>
    </section>

    <!-- 关于我们 -->
    <section class="py-16 md:py-24 bg-gray-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                <div class="order-2 lg:order-1">
                    <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-6">关于我们</h2>
                    <div class="prose max-w-none">
                        {{ about.content|safe }}
                    </div>
                    <div class="mt-8">
                        <a href="/about" class="inline-block bg-primary hover:bg-primary/90 text-white font-medium py-3 px-8 rounded-full transition-all duration-300 shadow-md hover:shadow-lg">
                            了解更多 <i class="fa fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
                <div class="order-1 lg:order-2 relative">
                    <div class="relative z-10 rounded-xl overflow-hidden shadow-xl">
                        <img src="https://picsum.photos/800/600?random=1" alt="关于我们" class="w-full h-auto">
                    </div>
                    <div class="absolute -bottom-6 -left-6 w-64 h-64 bg-primary/10 rounded-full -z-10"></div>
                    <div class="absolute -top-6 -right-6 w-48 h-48 bg-accent/10 rounded-full -z-10"></div>
                </div>
            </div>
        </div>
    </section>

    <!-- 新闻资讯 -->
    <section class="py-16 md:py-24 bg-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">新闻资讯</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">了解行业动态，掌握最新资讯</p>
                <div class="w-20 h-1 bg-primary mx-auto mt-6 rounded-full"></div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                {% for news_item in news %}
                <article class="bg-light rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 hover-scale">
                    {% if news_item.image_url %}
                    <img src="{{ news_item.image_url }}" alt="{{ news_item.title }}" class="w-full h-52 object-cover">
                    {% else %}
                    <div class="w-full h-52 bg-gray-100 flex items-center justify-center">
                        <span class="text-gray-400">暂无图片</span>
                    </div>
                    {% endif %}
                    <div class="p-6">
                        <div class="flex items-center text-gray-500 text-sm mb-3">
                            <i class="fa fa-calendar-o mr-2"></i>
                            <time>{{ news_item.publish_date.strftime('%Y-%m-%d') }}</time>
                        </div>
                        <h3 class="text-xl font-bold text-dark mb-3 line-clamp-2">{{ news_item.title }}</h3>
                        <p class="text-gray-600 mb-4 line-clamp-3">{{ news_item.summary or news_item.content|striptags|truncate(100) }}</p>
                        <a href="/news/{{ news_item.id }}" class="inline-flex items-center text-primary font-medium hover:text-primary/80 transition-colors duration-200">
                            阅读全文 <i class="fa fa-long-arrow-right ml-2"></i>
                        </a>
                    </div>
                </article>
                {% endfor %}
            </div>
            
            <div class="text-center mt-12">
                <a href="/news" class="inline-block border-2 border-primary text-primary hover:bg-primary hover:text-white font-medium py-3 px-8 rounded-full transition-all duration-300">
                    查看全部新闻
                </a>
            </div>
        </div>
    </section>

    <!-- 典型案例 -->
    <section class="py-16 md:py-24 bg-gray-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">典型案例</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">探索我们的成功案例，了解我们的专业能力</p>
                <div class="w-20 h-1 bg-primary mx-auto mt-6 rounded-full"></div>
            </div>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                {% for case in cases %}
                <div class="group relative overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-all duration-300">
                    {% if case.image_url %}
                    <img src="{{ case.image_url }}" alt="{{ case.title }}" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
                    {% else %}
                    <div class="w-full h-64 bg-gray-100 flex items-center justify-center">
                        <span class="text-gray-400">暂无图片</span>
                    </div>
                    {% endif %}
                    <div class="absolute inset-0 bg-gradient-to-t from-dark/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
                        <h3 class="text-white text-xl font-bold mb-2 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">{{ case.title }}</h3>
                        <p class="text-white/80 mb-4 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300 delay-75 line-clamp-2">{{ case.description }}</p>
                        {% if case.link_url %}
                        <a href="{{ case.link_url }}" class="text-white inline-flex items-center transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300 delay-150">
                            查看详情 <i class="fa fa-angle-right ml-2"></i>
                        </a>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>
            
            <div class="text-center mt-12">
                <a href="/cases" class="inline-block border-2 border-primary text-primary hover:bg-primary hover:text-white font-medium py-3 px-8 rounded-full transition-all duration-300">
                    查看全部案例
                </a>
            </div>
        </div>
    </section>

    <!-- 招贤纳士 -->
    <section class="py-16 md:py-24 bg-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">招贤纳士</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">加入我们，共创美好未来</p>
                <div class="w-20 h-1 bg-primary mx-auto mt-6 rounded-full"></div>
            </div>
            
            <div class="space-y-6">
                {% for job in jobs %}
                <div class="bg-light rounded-xl p-6 shadow-md hover:shadow-lg transition-all duration-300">
                    <div class="flex flex-col md:flex-row md:items-center justify-between mb-4">
                        <div>
                            <h3 class="text-xl font-bold text-dark">{{ job.title }}</h3>
                            <div class="flex items-center text-gray-500 mt-2">
                                <span class="mr-4"><i class="fa fa-building-o mr-1"></i> {{ job.department }}</span>
                                <span><i class="fa fa-map-marker mr-1"></i> {{ job.location }}</span>
                            </div>
                        </div>
                        <div class="mt-4 md:mt-0">
                            <button class="job-detail-btn bg-primary/10 hover:bg-primary/20 text-primary font-medium py-2 px-6 rounded-full transition-colors duration-200" data-id="{{ job.id }}">
                                查看详情
                            </button>
                        </div>
                    </div>
                    
                    <div id="job-detail-{{ job.id }}" class="job-detail hidden mt-6 pt-6 border-t border-gray-100">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                            <div>
                                <h4 class="text-lg font-semibold text-dark mb-3">岗位职责</h4>
                                <div class="text-gray-600 space-y-2">
                                    {{ job.responsibilities|safe }}
                                </div>
                            </div>
                            <div>
                                <h4 class="text-lg font-semibold text-dark mb-3">任职要求</h4>
                                <div class="text-gray-600 space-y-2">
                                    {{ job.requirements|safe }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            
            <div class="text-center mt-12">
                <a href="/jobs" class="inline-block border-2 border-primary text-primary hover:bg-primary hover:text-white font-medium py-3 px-8 rounded-full transition-all duration-300">
                    查看全部职位
                </a>
            </div>
        </div>
    </section>

    <!-- 联系我们 -->
    <section class="py-16 md:py-24 bg-gray-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
                <div>
                    <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-6">联系我们</h2>
                    <p class="text-gray-600 mb-8">无论您有任何问题或需求，我们都将竭诚为您服务</p>
                    
                    <div class="space-y-6">
                        <div class="flex items-start">
                            <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4">
                                <i class="fa fa-map-marker text-xl"></i>
                            </div>
                            <div>
                                <h4 class="text-lg font-semibold text-dark mb-1">公司地址</h4>
                                <p class="text-gray-600">北京市海淀区xxxxxxx</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4">
                                <i class="fa fa-phone text-xl"></i>
                            </div>
                            <div>
                                <h4 class="text-lg font-semibold text-dark mb-1">联系电话</h4>
                                <p class="text-gray-600">186xxxxxxxx3 或 010-xxxxxxxx1</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4">
                                <i class="fa fa-envelope text-xl"></i>
                            </div>
                            <div>
                                <h4 class="text-lg font-semibold text-dark mb-1">电子邮箱</h4>
                                <p class="text-gray-600">123456@qq.com</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4">
                                <i class="fa fa-clock-o text-xl"></i>
                            </div>
                            <div>
                                <h4 class="text-lg font-semibold text-dark mb-1">工作时间</h4>
                                <p class="text-gray-600">周一至周五: 9:00 - 18:30</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-8 flex space-x-4">
                        <a href="#" class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center hover:bg-primary/90 transition-colors duration-200">
                            <i class="fa fa-weixin"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center hover:bg-primary/90 transition-colors duration-200">
                            <i class="fa fa-weibo"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center hover:bg-primary/90 transition-colors duration-200">
                            <i class="fa fa-linkedin"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <div class="bg-white rounded-xl p-8 shadow-lg">
                        <h3 class="text-xl font-bold text-dark mb-6">留言咨询</h3>
                        <form id="contact-form" class="space-y-6">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                                    <input type="text" id="name" name="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors duration-200" required>
                                </div>
                                <div>
                                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                                    <input type="email" id="email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors duration-200" required>
                                </div>
                            </div>
                            
                            <div>
                                <label for="content" class="block text-sm font-medium text-gray-700 mb-1">留言内容</label>
                                <textarea id="content" name="content" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors duration-200" required></textarea>
                            </div>
                            
                            <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition-colors duration-200 flex items-center justify-center">
                                <i class="fa fa-paper-plane mr-2"></i> 提交留言
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 底部 -->
    <footer class="bg-dark text-white pt-16 pb-8">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
                <div>
                    <h3 class="text-xl font-bold mb-6">xxxx科技有限公司</h3>
                    <p class="text-gray-400 mb-6">我们致力于为客户提供最优质的产品和服务，满足您的各种需求。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
                            <i class="fa fa-weixin text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
                            <i class="fa fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
                            <i class="fa fa-linkedin text-xl"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-xl font-bold mb-6">快速链接</h3>
                    <ul class="space-y-3">
                        <li><a href="/" class="text-gray-400 hover:text-white transition-colors duration-200">首页</a></li>
                        <li><a href="/products" class="text-gray-400 hover:text-white transition-colors duration-200">产品中心</a></li>
                        <li><a href="/about" class="text-gray-400 hover:text-white transition-colors duration-200">关于我们</a></li>
                        <li><a href="/news" class="text-gray-400 hover:text-white transition-colors duration-200">新闻资讯</a></li>
                        <li><a href="/cases" class="text-gray-400 hover:text-white transition-colors duration-200">典型案例</a></li>
                        <li><a href="/jobs" class="text-gray-400 hover:text-white transition-colors duration-200">招贤纳士</a></li>
                        <li><a href="/contact" class="text-gray-400 hover:text-white transition-colors duration-200">联系我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-xl font-bold mb-6">联系方式</h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-map-marker mt-1 mr-3 text-gray-400"></i>
                            <span class="text-gray-400">北京市海淀区xxxxxxx</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-phone mt-1 mr-3 text-gray-400"></i>
                            <span class="text-gray-400">186xxxxxxxx3 或 010-xxxxxxxx1</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-envelope mt-1 mr-3 text-gray-400"></i>
                            <span class="text-gray-400">123456@qq.com</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-clock-o mt-1 mr-3 text-gray-400"></i>
                            <span class="text-gray-400">周一至周五: 9:00 - 18:30</span>
                        </li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-xl font-bold mb-6">关注我们</h3>
                    <div class="bg-white/10 p-4 rounded-lg text-center">
                        <img src="https://picsum.photos/150/150?random=2" alt="微信公众号" class="w-32 h-32 mx-auto mb-3 rounded-lg">
                        <p class="text-gray-400 text-sm">扫描二维码关注公众号</p>
                    </div>
                </div>
            </div>
            
            <div class="border-t border-gray-800 pt-8">
                <div class="flex flex-col md:flex-row md:justify-between items-center">
                    <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 xxxx科技有限公司. 保留所有权利.</p>
                    <div class="flex space-x-6">
                        <a href="#" class="text-gray-500 hover:text-white text-sm transition-colors duration-200">隐私政策</a>
                        <a href="#" class="text-gray-500 hover:text-white text-sm transition-colors duration-200">服务条款</a>
                        <a href="#" class="text-gray-500 hover:text-white text-sm transition-colors duration-200">网站地图</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- 在线客服 -->
    <div id="chat-widget" class="fixed bottom-6 right-6 z-50">
        <button id="chat-toggle" class="bg-primary hover:bg-primary/90 text-white w-14 h-14 rounded-full shadow-lg flex items-center justify-center transition-all duration-300 focus:outline-none">
            <i class="fa fa-comments text-xl"></i>
        </button>
        
        <div id="chat-box" class="hidden bg-white rounded-xl shadow-2xl w-80 h-[400px] flex flex-col mt-4 transform transition-all duration-300">
            <div class="bg-primary text-white p-4 rounded-t-xl flex items-center justify-between">
                <h3 class="font-bold">在线客服</h3>
                <button id="chat-close" class="text-white hover:text-white/80 transition-colors duration-200">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            
            <div class="flex-1 p-4 overflow-y-auto" id="chat-messages">
                <div class="flex items-start mb-4">
                    <div class="bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">
                        <i class="fa fa-user"></i>
                    </div>
                    <div class="bg-gray-100 rounded-lg p-3 max-w-[80%]">
                        <p>您好！有什么可以帮助您的吗？</p>
                    </div>
                </div>
            </div>
            
            <div class="border-t border-gray-200 p-4">
                <div class="flex">
                    <input type="text" id="chat-input" placeholder="输入消息..." class="flex-1 px-4 py-2 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors duration-200">
                    <button id="chat-send" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-r-lg transition-colors duration-200">
                        <i class="fa fa-paper-plane"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 100) {
                navbar.classList.add('shadow-md');
                navbar.classList.remove('shadow-sm');
            } else {
                navbar.classList.remove('shadow-md');
                navbar.classList.add('shadow-sm');
            }
        });
        
        // 移动端菜单切换
        document.getElementById('menu-toggle').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenu.classList.toggle('hidden');
        });
        
        // 轮播图
        document.addEventListener('DOMContentLoaded', function() {
            const carousel = document.getElementById('carousel');
            const items = carousel.querySelectorAll('.carousel-item');
            const indicators = carousel.querySelectorAll('[data-index]');
            const prevBtn = document.getElementById('prev-btn');
            const nextBtn = document.getElementById('next-btn');
            let currentIndex = 0;
            let interval;
            
            function showSlide(index) {
                items.forEach(item => item.classList.add('opacity-0'));
                items[index].classList.remove('opacity-0');
                
                indicators.forEach(indicator => indicator.classList.remove('bg-white'));
                indicators.forEach(indicator => indicator.classList.add('bg-white/50'));
                indicators[index].classList.remove('bg-white/50');
                indicators[index].classList.add('bg-white');
                
                currentIndex = index;
            }
            
            function nextSlide() {
                let newIndex = (currentIndex + 1) % items.length;
                showSlide(newIndex);
            }
            
            function prevSlide() {
                let newIndex = (currentIndex - 1 + items.length) % items.length;
                showSlide(newIndex);
            }
            
            function startInterval() {
                interval = setInterval(nextSlide, 5000);
            }
            
            function stopInterval() {
                clearInterval(interval);
            }
            
            prevBtn.addEventListener('click', function() {
                stopInterval();
                prevSlide();
                startInterval();
            });
            
            nextBtn.addEventListener('click', function() {
                stopInterval();
                nextSlide();
                startInterval();
            });
            
            indicators.forEach(indicator => {
                indicator.addEventListener('click', function() {
                    stopInterval();
                    showSlide(parseInt(this.dataset.index));
                    startInterval();
                });
            });
            
            // 鼠标悬停暂停轮播
            carousel.addEventListener('mouseenter', stopInterval);
            carousel.addEventListener('mouseleave', startInterval);
            
            // 启动轮播
            startInterval();
        });
        
        // 职位详情切换
        document.querySelectorAll('.job-detail-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const jobId = this.dataset.id;
                const detailElement = document.getElementById(`job-detail-${jobId}`);
                detailElement.classList.toggle('hidden');
            });
        });
        
        // 在线客服
        document.addEventListener('DOMContentLoaded', function() {
            const chatToggle = document.getElementById('chat-toggle');
            const chatBox = document.getElementById('chat-box');
            const chatClose = document.getElementById('chat-close');
            const chatInput = document.getElementById('chat-input');
            const chatSend = document.getElementById('chat-send');
            const chatMessages = document.getElementById('chat-messages');
            
            chatToggle.addEventListener('click', function() {
                chatBox.classList.toggle('hidden');
                if (!chatBox.classList.contains('hidden')) {
                    chatInput.focus();
                }
            });
            
            chatClose.addEventListener('click', function() {
                chatBox.classList.add('hidden');
            });
            
            function addMessage(text, isUser = false) {
                const messageDiv = document.createElement('div');
                messageDiv.className = `flex items-start mb-4 ${isUser ? 'justify-end' : ''}`;
                
                let avatar, bgClass;
                if (isUser) {
                    avatar = '<div class="bg-gray-300 text-gray-700 rounded-full w-8 h-8 flex items-center justify-center ml-3 flex-shrink-0"><i class="fa fa-user"></i></div>';
                    bgClass = 'bg-primary text-white';
                } else {
                    avatar = '<div class="bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0"><i class="fa fa-user"></i></div>';
                    bgClass = 'bg-gray-100 text-gray-800';
                }
                
                messageDiv.innerHTML = `
                    ${avatar}
                    <div class="${bgClass} rounded-lg p-3 max-w-[80%]">
                        <p>${text}</p>
                    </div>
                `;
                
                chatMessages.appendChild(messageDiv);
                chatMessages.scrollTop = chatMessages.scrollHeight;
            }
            
            function sendMessage() {
                const text = chatInput.value.trim();
                if (text) {
                    addMessage(text, true);
                    chatInput.value = '';
                    
                    // 模拟客服回复
                    setTimeout(() => {
                        addMessage('感谢您的咨询，我们会尽快回复您！');
                    }, 1000);
                }
            }
            
            chatSend.addEventListener('click', sendMessage);
            
            chatInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    sendMessage();
                }
            });
        });
        
        // 联系表单提交
        // 联系表单提交
        document.getElementById('contact-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = {
                name: document.getElementById('name').value,
                email: document.getElementById('email').value,
                content: document.getElementById('content').value
            };
            // 这里需要添加发送请求的代码
            fetch('/message', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(formData)
            })
            .then(response => response.json())
            .then(data => { 
                console.log(data);
                // 添加弹窗提示留言成功
                alert('留言成功！');
                // 清空表单
                document.getElementById('contact-form').reset();
            })
            .catch(error => {
                console.error('Error:', error);
                alert('留言失败，请稍后重试！');
            });
        });
    </script>
</body>
</html>
